import FlowEcharts from "./lib/FlowEcharts";
import data from './lib/emutiple-data.js';

export default class Emutiple {
  constructor(basicCesium) {
    this.basicCesium = basicCesium
    this.viewer = basicCesium.viewer;

    this._instance = null;
    this.option = null;
    this.initChart();
    this.initEvent();

  }
  initChart() {
    var symbolSize = 5;
    this.option = {
      animation: !0,
      backgroundColor: 'rgba(17, 19, 42, 0.2)',
      title: [{
        text: 'Cesium + Echarts 组合图',
        subtext: 'cesium echarts zu he tu',
        left: 'center',
        top: 10,
        textStyle: {
          color: '#fff'
        },
        subtextStyle: {
          color: '#fff'
        }
      }, {
        id: 'statistic1',
        text: '预期寿命与收入关系',
        left: '20%',
        top: 50,
        width: 100,
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      }, {
        id: 'statistic2',
        text: '不同国家的平均收入',
        right: '20%',
        top: 50,
        width: 100,
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      }, {
        id: 'statistic3',
        text: '人口数与收入关系',
        left: '20%',
        bottom: '45%',
        width: 100,
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      }, {
        id: 'statistic4',
        text: '人口数与预期寿命关系',
        right: '20%',
        bottom: '45%',
        width: 100,
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      }],
      tooltip: {
        show: true,
        trigger: 'item'
      },
      toolbox: {
        left: 'center',
        feature: {
          dataZoom: {}
        }
      },
      grid: [{
          top: 120,
          left: 110,
          right: '70%',
          bottom: '60%',
        },
        {
          top: 120,
          left: '70%',
          bottom: '60%',
        },
        {
          left: 110,
          right: '70%',
          top: '60%',
        },
        {
          left: '70%',
          top: '60%',
        }
      ],
      xAxis: [{
          type: 'value',
          gridIndex: 0,
          name: '收入',
          nameTextStyle: {
            color: '#00eaff'
          },
          splitLine: {
            show: !1
          },
          axisLabel: {
            color: '#00eaff',
            rotate: 50,
            interval: 0
          },
          axisLine: {
            show: !0,
            lineStyle: {
              color: '#00eaff'
            }
          }
        },
        {
          type: 'category',
          gridIndex: 1,
          name: '国家',
          nameTextStyle: {
            color: '#00eaff'
          },
          splitLine: {
            show: !1
          },
          boundaryGap: false,
          axisLabel: {
            color: '#00eaff',
            rotate: 50,
            interval: 0
          },
          axisLine: {
            show: !0,
            lineStyle: {
              color: '#00eaff'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 2,
          name: '收入',
          nameTextStyle: {
            color: '#00eaff'
          },
          splitLine: {
            show: !1
          },
          axisLabel: {
            color: '#00eaff',
            rotate: 50,
            interval: 0
          },
          axisLine: {
            show: !0,
            lineStyle: {
              color: '#00eaff'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 3,
          name: '预期寿命',
          nameTextStyle: {
            color: '#00eaff'
          },
          splitLine: {
            show: !1
          },
          axisLabel: {
            color: '#00eaff',
            rotate: 50,
            interval: 0
          },
          axisLine: {
            show: !0,
            lineStyle: {
              color: '#00eaff'
            }
          }
        }
      ],
      yAxis: [{
          type: 'value',
          gridIndex: 0,
          name: '预期寿命',
          nameTextStyle: {
            color: '#00eaff'
          },
          axisLabel: {
            color: '#00eaff',
          },
          splitLine: {
            show: !1
          },
          axisLine: {
            show: !0,
            lineStyle: {
              color: '#00eaff'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 1,
          name: '收入',
          nameTextStyle: {
            color: '#00eaff'
          },
          axisLabel: {
            color: '#00eaff',
          },
          splitLine: {
            show: !1
          },
          axisLine: {
            show: !0,
            lineStyle: {
              color: '#00eaff'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 2,
          name: '人口',
          nameTextStyle: {
            color: '#00eaff'
          },
          axisLabel: {
            color: '#00eaff',
          },
          splitLine: {
            show: !1
          },
          axisLine: {
            show: !0,
            lineStyle: {
              color: '#00eaff'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 3,
          name: '人口',
          nameTextStyle: {
            color: '#00eaff'
          },
          axisLabel: {
            color: '#00eaff',
          },
          splitLine: {
            show: !1
          },
          axisLine: {
            show: !0,
            lineStyle: {
              color: '#00eaff'
            }
          }
        }
      ],
      dataset: {
        dimensions: [
          '收入',
          '预期寿命',
          '人口',
          '国家'
        ],
        source: data
      },
      series: [{
          type: 'scatter',
          symbolSize: symbolSize,
          xAxisIndex: 0,
          yAxisIndex: 0,
          encode: {
            x: '收入',
            y: '预期寿命',
            tooltip: [0, 1, 2, 3, 4]
          }
        },
        {
          type: 'scatter',
          symbolSize: symbolSize,
          xAxisIndex: 1,
          yAxisIndex: 1,
          encode: {
            x: '国家',
            y: '收入',
            tooltip: [0, 1, 2, 3, 4]
          }
        },
        {
          type: 'scatter',
          symbolSize: symbolSize,
          xAxisIndex: 2,
          yAxisIndex: 2,
          encode: {
            x: '收入',
            y: '人口',
            tooltip: [0, 1, 2, 3, 4]
          }
        },
        {
          type: 'scatter',
          symbolSize: symbolSize,
          xAxisIndex: 3,
          yAxisIndex: 3,
          encode: {
            x: '预期寿命',
            y: '人口',
            tooltip: [0, 1, 2, 3, 4]
          }
        }
      ]
    };
    this._instance == null ? this._instance = new FlowEcharts(this.viewer, this.option) : this._instance.updateOverlay(this.option);
  }

  initEvent() {
    window.onresize = () => {
      if (this._instance != null) this._instance.updateOverlay(this.option);
    }
  }
}